<template>
  <div>
    <div class="qrghxx">确认挂号信息</div>
    <el-card style="margin-bottom: 10px">
      <div class="jzrglk">
        <div>请选择就诊人</div>
        <div><el-button type="primary" @click="jz">就诊人管理</el-button></div>
      </div>
      <div class="jiuzhenrenmp">
        <div
          class="mplist"
          v-for="(item, index) in list"
          @click="handle(item, index)"
          :key="index"
        >
          <div class="mptop">
            <div>{{ item.name }}</div>
            <div><el-button type="primary">编辑</el-button></div>
          </div>
          <div class="mpbottom">
            <div>证件类型:{{ item.param.certificatesTypeString }}</div>
            <div>证件号码:{{ item.contactsCertificatesNo }}</div>
            <div>
              用户性别:<span v-if="item.sex == 0">男</span
              ><span v-else>女</span>
            </div>
            <div>出生日期:{{ item.birthdate }}</div>
            <div>手机号码:{{ item.phone }}</div>
            <div>
              婚烟状况:<span v-if="item.isMarry == 1">未婚</span
              ><span v-else>已婚</span>
            </div>
            <div>当前住址:{{ item.address }}</div>
            <div>详细住址:{{ item.param.fullAddress }}</div>
          </div>
          <div class="yxz" v-show="item.sfxz">已选择</div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-bottom: 10px">
      <div class="jzrglk">
        <div>挂号信息</div>
        <div></div>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item
          label="就诊日期"
          label-align="right"
          align="center"
          label-class-name="my-label"
          class-name="my-content"
          width="150px"
          >{{ obj.workDate }}</el-descriptions-item
        >
        <el-descriptions-item
          label="就诊医院"
          label-align="right"
          align="center"
          >{{ obj1.hosname }}</el-descriptions-item
        >
        <el-descriptions-item
          label="就诊科室"
          label-align="right"
          align="center"
          >{{ obj1.depname }}</el-descriptions-item
        >
        <el-descriptions-item
          label="医生姓名"
          label-align="right"
          align="center"
        >
          <el-tag size="small">{{ obj.docname }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          label="医生职称"
          label-align="right"
          align="center"
        >
          <el-tag size="small">{{ obj.title }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          label="医生专长"
          label-align="right"
          align="center"
        >
          <el-tag size="small">{{ obj.skill }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="医生服务" label-align="right" align="left">
          <span style="color: red">{{ obj.amount }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <div style="text-align: center">
      <el-button type="primary" @click="qrgh">确认挂号</el-button>
    </div>
  </div>
</template>

<style scoped>
.yxz {
  position: absolute;
  width: 200px;
  height: 200px;
  color: red;
  border-radius: 50%;
  border: 1px dashed red;
  text-align: center;
  line-height: 200px;
  left: 20%;
  top: 20%;
  opacity: 0.5;
  transform: rotate(35deg);
  font-weight: 900;
}
.mpbottom div {
  margin-bottom: 15px;
}
.mpbottom {
  width: 100%;
  height: auto;
  padding: 15px;
  box-sizing: border-box;
}
.mptop {
  width: 100%;
  display: flex;
  padding: 0px 20px;
  box-sizing: border-box;
  justify-content: space-between;
  height: 60px;
  align-items: center;
  background: #e5e5e5;
}
.mplist {
  width: 32%;
  border: 1px solid #e5e5e5;
  position: relative;
  height: auto;
  margin-right: 10px;
}
.jiuzhenrenmp {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.jzrglk {
  width: 100%;
  height: auto;
  display: flex;
  margin-bottom: 10px;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
  align-content: center;
}
.qrghxx {
  font-weight: 900;
  color: #7f7f7f;
  font-size: 20px;
  margin-bottom: 10px;
}
</style>
<script setup>
import { onMounted, ref } from "vue";
import instance from "../assets/axios";
import { useRouter } from "vue-router";
const router = useRouter();
const list = ref([]);
const obj = ref({});
const ids = ref("");
const obj1 = ref({});
const getlist = async () => {
  const res = await instance.get("/api/user/patient/auth/findAll");
  list.value = res.data;

  list.value.forEach((el) => {
    el.sfxz = false;
  });
  console.log(res);
};
const jz=()=>{
  router.push({
    path:"/jzrgl"
  })
}
const qrgh = async () => {
  const res = await instance.post(
    `/api/order/orderInfo/auth/submitOrder/${obj.value.hoscode}/${obj.value.id}/${ids.value}`
  );
  console.log(res);
  router.push({
    path: "/zhifu",
    query: {
      orderId: res.data,
    },
  });
};
const dij = (index) => {
  console.log(index);
};
const handle = (item, index) => {
  ids.value = item.id;
  item.sfxz = true;
};
const getinfo = async () => {
  const res = await instance.get(
    `/api/hosp/hospital/getSchedule/${router.currentRoute.value.query.docId}`
  );
  console.log(res);
  obj.value = res.data;
  obj1.value = res.data.param;
};
onMounted(() => {
  getlist();
  getinfo();
});
</script>